<!--
  ~ Copyright (C) 2019 Nokia. All rights reserved.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div style="height: 80vh ">
  <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
  <ngx-datatable
      class="material"
      *ngIf="ready"
      [rows]="currentPageRows"
      [columns]="columns"
      [columnMode]="'force'"
      [headerHeight]="125"
      [scrollbarV]="true"
      [scrollbarH]="true"
      [footerHeight]="50"
      [loadingIndicator]="isLoading"
      [rowHeight]="200"
      [reorderable]="false"
      [virtualization]="false"
      [externalPaging]="true"
      [count]="page.totalElements"
      [offset]="page.pageNumber"
      [limit]="page.size"
      (page)="setPage($event)"
  >
    <ngx-datatable-column *ngFor="let col of columns" prop="{{col.prop}}" [minWidth]="100" >
      <ng-template let-column="column" height="100" ngx-datatable-header-template>
            <span class="datatable-column-span">
              <b>{{col.name}}</b>
              <div *ngIf="canBeDeleted(col.name)" style="width: 45px !important; color: red; "
                   class="delete-icon" (click)="deleteColumn(col)">⛌</div>
            </span>
        <br/>
        <input
            *ngIf="isSearchable(col.name)"
            type='text'
            class="datattable-input-filter"
            placeholder='Filter column...'
            (keyup)='updateColumnFilter($event, col.prop)'
        />
      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column *ngIf="addNewColumn" class="datatable-white-body-cell" [minWidth]="220" [maxWidth]="220" [width]="220" >
      <ng-template ngx-datatable-header-template>
        <gab-column-provider [pathsAndNames]="pathsandnames" (onCancel)="hideAddNewColumn()" (onSave)="refresh()"></gab-column-provider>
      </ng-template>
      <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template>
      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column class="datatable-white-body-cell" [minWidth]="50" [maxWidth]="100"  >
      <ng-template ngx-datatable-header-template>
        <div data-tests-id="gab-add-btn" class="add-btn add-btn-div" (click)="showAddNewColumn()">Add</div>
      </ng-template>
      <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template>
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</div>
